<template>
    <div class="login">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus';
import { userLoign } from '@/serveice/userinfo';
import { useRouter } from 'vue-router';
import routeInfo from '@/components';
import { useMenuStore } from '@/stores/menu'
let router = useRouter();
let menuStore = useMenuStore()

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    username: '',
    password: '',
})

const rules = reactive({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 12, message: '用户名长度3-12位', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' }, { pattern: /^[0-9a-z]{3,10}$/, message: '密码长度3-10位数字字母', trigger: 'blur' }
    ]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            console.log('submit!')
            let { data } = await userLoign({
                username: ruleForm.username,
                userpwd: ruleForm.password
            })
            if (data.code == 200) {
                localStorage.setItem('menu', JSON.stringify(data.menu));
                localStorage.setItem('token', data.token);
                if (data.menu.length) {
                    let defaultMenu = data.menu[0]
                    router.addRoute('main', {
                        path: '',
                        name: 'default',
                        component: routeInfo[defaultMenu['component']]
                    })
                    data.menu.forEach((item: any) => {
                        router.addRoute('main', {
                            path: item.path,
                            name: item.name,
                            component: routeInfo[item['component']]
                        })
                    })
                }
                menuStore.initList(data.menu);
                localStorage.setItem("menu", JSON.stringify(data.menu))
                router.push('/main')

                console.log(router.getRoutes());
            }

        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style lang="less" scoped>
.login {
    width: 500px;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
